<!--  <link rel="stylesheet" type="text/css" href="<?php echo(JS_LIBS);?>FileAPI/statics/nueva.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="<?php echo(JS_LIBS);?>FileAPI/jcrop/jquery.Jcrop.min.css" media="screen" />
	
	<script src="<?php echo(JS_LIBS);?>FileAPI/FileAPI/FileAPI.min.js"></script>
	<script src="<?php echo(JS_LIBS);?>FileAPI/FileAPI/FileAPI.exif.js"></script>
	<script src="<?php echo(JS_LIBS);?>FileAPI/jquery.fileapi.js"></script>
	<script src="<?php echo(JS_LIBS);?>FileAPI/jcrop/jquery.Jcrop.min.js"></script>
	<script src="<?php echo(JS_LIBS);?>FileAPI/statics/jquery.modal.js"></script>
	<script>
				function load(){

					$('#userpic').fileapi({
						url: 'http://rubaxa.org/FileAPI/server/ctrl.php',
						accept: 'image/*',
						imageSize: { minWidth: 200, minHeight: 200 },
						elements: {
							active: { show: '.js-upload', hide: '.js-browse' },
							preview: {
								el: '.js-preview',
								width: 200,
								height: 200
							},
							progress: '.js-progress'
						},
						onSelect: function (evt, ui){
							var file = ui.files[0];

							if( !FileAPI.support.transform ) {
								alert('Your browser does not support Flash :(');
							}
							else if( file ){
								$('#popup').modal({
									closeOnEsc: true,
									closeOnOverlayClick: false,
									onOpen: function (overlay){
										$(overlay).on('click', '.js-upload', function (){
											$.modal().close();
											$('#userpic').fileapi('upload');
										});

										$('.js-img', overlay).cropper({
											file: file,
											bgColor: '#fff',
											maxSize: [$(window).width()-100, $(window).height()-100],
											minSize: [200, 200],
											selection: '90%',
											onSelect: function (coords){
												$('#userpic').fileapi('crop', file, coords);
											}
										});
									}
								}).open();
							}
						}
					});	
				}


				</script>
				
				
				<div id="userpic" class="userpic">
					<div class="js-preview userpic__preview"></div>
						<div class="btn btn-success js-fileapi-wrapper">
							<div class="js-browse" onclick="javascript:load();">
								<span class="btn-txt">Choose</span>
								<input type="file" name="filedata"/>
							</div>
							<div class="js-upload" style="display: none;">
								<div class="progress progress-success"><div class="js-progress bar"></div></div>
								<span class="btn-txt">Uploading</span>
							</div>
						</div>
					</div>


				<div id="popup" class="popup" style="display: none;">
					<div class="popup__body"><div class="js-img"></div></div>
					<div style="margin: 0 0 5px; text-align: center;">
						<div class="js-upload ">Upload</div>
					</div>
				</div>
				-->
				
				
<link rel="stylesheet" type="text/css" href="<?php echo(JS_LIBS);?>image-crop/example.css">
<link rel="stylesheet" type="text/css" href="<?php echo(JS_LIBS);?>image-crop/crop.css">
<script src="<?php echo(JS_LIBS);?>image-crop/crop.js"></script>
<script>

		// create new object crop
		// you may change the "one" variable to anything
		var one = new CROP();

		// link the .default class to the crop function
		one.init('.default');

		// load image into crop
		one.loadImg('http://192.168.100.227/test/assets/images/big/1998.jpg');

		// send coordinates for processing
		// you may call the coordinates with the function coordinates(one);
		$(document).on('click', 'button', function() {

			$.ajax({
				type: "post",
				dataType: "json",
				url: "save.php",
				data: $.param(coordinates(one))
			})
			.done(function(data) {

				$('.example .output').remove();
				$('.example').append('<img src="'+data.url+'" class="output" />')
				$('.example .output').delay('4000').fadeOut('slow');

			});

		});

</script>

<div class="example">

	<div class="default">
			<div class="cropMain"></div>
			<div class="cropSlider"></div>
			<button class="cropButton">Crop</button>
		</div>

	</div>

	
				